<!DOCTYPE html>
<html>
    <head>
        <title>AGM支付设置</title>
        <link rel="stylesheet" href="/static/weui.min.css">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .page, body{background-color: #fbf9fe}
            .page_title{color:#225fba}
            .hd{text-align:center}
            .weui_label{width:4em;}
            .bd{padding-bottom:30px;}
            .weui_cell_hd img{height: 40px;}
            .iconMenuBadge {
                position: absolute;
                top: 2px;
                left: 2px;
            }
            .buttonBadge {
                position: absolute;
                top: -9px;
                left: -15px;
            }
            .badge {
              background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
              background-color: red;
              border: 2px solid white;
              border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
              box-shadow: 1px 1px 1px black;
              color: white;
              font: bold 15px/13px Helvetica, Verdana, Tahoma;
              height: 16px; 
              padding: 4px 3px 0 3px;
              text-align: center;
              min-width: 14px;
            }
            .nav_right{position: absolute;right: 5px;width: 35px;top: 5px;}
            .weui_actionsheet_menu a .weui_actionsheet_cell{color:initial;border-top: 1px solid #d9d9d9;}
            .weui_cells_access .weui_cell_ft_down:after{-webkit-transform: rotate(135deg);transform:rotate(135deg);}
            .weui_cells_access .weui_cell_ft_up:after{-webkit-transform: rotate(315deg);transform:rotate(315deg);}
            .weui_cells.weui_cells_access.seller{ margin-top:0px; }
            .weui_cells_form input{ text-align: center; }
            .weui_icon_toast_info:before{
                content: '\EA0B';
                color: #fff;
                font-size: 55px;
            }
            .weui_icon_toast_info{
                margin: 22px 0 0;
                display: block;
            }             
            /*
            .weui_cells_form .weui_cell_bd, .rule .weui_cell_bd{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
            .weui_cells_form .weui_cell_hd, .rule .weui_cell_hd{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;width:5em;}  */          
        </style>
    </head>
    <body>
        <div id='wx_logo' style="display:none;"><img src="/static/images/wx_logo.jpg"/></div>
        <div id="home">
            <div class="hd">
                <h2 class="page_title">AGM支付设置</h2> 
                <img src="/static/images/icon_nav_cell.png" class="nav_right">
            </div>
            <div class="bd">
                <div class="weui_cells_title">已经有支付二维码的销售列表</div>
                {% for openid in openids %}
                <div class="weui_cells weui_cells_access seller">
                    <a class="weui_cell" href="javascript:;">
                        <div class="weui_cell_hd"><img src="{{ sellers[openid]['headimgurl'] or '/static/images/getheadimg.png'}}"></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>{{ sellers[openid]['nickname'] }}</p>
                        </div>
                        <div class="weui_cell_ft weui_cell_ft_down">{{ sellers[openid]['shopname'] }}</div>
                    </a>
                    {% for product_id in sellers[openid]['product_id'] %}
                    <a class="weui_cell qrrow" href="#paysetting&pid={{ product_id }}" style="display:none;">
                        <div class="weui_cell_hd">支付二维码:</div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>{{ product_id }}</p>
                        </div>
                        <div class="weui_cell_ft">点击修改</div>
                    </a>
                    {% endfor %}             
                </div>
                {% endfor %}
            </div>
        </div>
        <div id="paysetting" style="display:none;">
            <div class="hd">
                <h2 class="page_title">维码编号:<span id="set_id">123456</span></h2>
            </div>
                <div class="weui_cells weui_cells_access">
                    <a class="weui_cell" id="set_seller" href="sellerinfo">
                        <div class="weui_cell_hd"><img src="/static/images/getheadimg.png"></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>测试销售</p>
                        </div>
                        <div class="weui_cell_ft">点击查看详细资料</div>
                    </a>               
                </div>            
            <div class="weui_cells_title">支付码设置</div>
            <div class="weui_cells weui_cells_form">
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label class="weui_label">消费金额</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input" id="input_total_fee" type="number" pattern="[0-9\.]*" step="0.01" placeholder="请输入相应消费金额">
                    </div>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label class="weui_label">未关注消费金额</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input" id="input_no_subscribe_fee" type="number" pattern="[0-9\.]*" step="0.01" placeholder="请输入相应未关注消费金额">
                    </div>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label class="weui_label">活动内容</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input" id="input_body" placeholder="请输入扫码显示内容">
                    </div>
                </div>                 
                <div class="weui_cell">
                    <div class="weui_cell_hd"><label class="weui_label">奖励金额</label></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <input class="weui_input" id="input_reward" type="number" pattern="[0-9\.]*" step="0.01" placeholder="请输入相应奖励金额">
                    </div>
                </div>                
            </div>
            <div class="weui_btn_area">
                <a class="weui_btn weui_btn_primary" id="submitbtn" href="javascript:">确定修改</a>
                <a class="weui_btn weui_btn_default" id="backtohome" href="javascript:">取消返回</a>
            </div>
        </div>
        <div id="toast1" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">保存成功</p>
            </div>
        </div>
        <div id="toast2" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast weui_icon_toast_info"></i>
                <p class="weui_toast_content">数据有误</p>
            </div>
        </div>
        <div id="actionSheet_wrap" style="display: none;">
            <div class="weui_mask_transition" id="mask" style="display: none;"></div>
            <div class="weui_actionsheet" id="weui_actionsheet">
                <div class="weui_actionsheet_menu">
                    <a href="record"><div class="weui_actionsheet_cell">活动记录</div></a>
                    <a href="."><div class="weui_actionsheet_cell">支付设置</div></a>
                </div>
                <div class="weui_actionsheet_action">
                    <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
                </div>
            </div>
        </div>        
    </body>
    <script>
        var sellers = {{ json.dumps(sellers)|safe }}, orderdict={{ json.dumps(orderdict)|safe }};
        $('.seller').click(function(){
            var self = $(this);
            var footer = self.find('.weui_cell_ft').eq(0);
            var qrrows = self.find('.qrrow')
            if(footer.hasClass('weui_cell_ft_up')){
                footer.removeClass('weui_cell_ft_up');
                footer.addClass('weui_cell_ft_down');
                qrrows.hide();
            }else{
                footer.removeClass('weui_cell_ft_down');                
                footer.addClass('weui_cell_ft_up');
                qrrows.show();
            }
        })
        var homepage = $('#home'), settingpage = $('#paysetting');
        window.onhashchange = function(){
            var hash = location.hash;
            //console.info(hash);
            if(hash.search('paysetting')!=-1){
                var pid = hash.match(/pid=(.+)/)[1];
                showpaysetting(pid);
            }else{
                homepage.show();
                settingpage.hide();
            }
        }
        input_array = [
            ['input_total_fee', 'total_fee', true], 
            ['input_no_subscribe_fee', 'no_subscribe_fee', true],
            ['input_body', 'body', false],
            ['input_reward', 'reward', true]
        ]        
        showpaysetting = function(pid){
            homepage.hide();
            var seller = sellers[orderdict[pid]['attach']];
            $('#set_id').text(pid);
            var set_seller = $('#set_seller');
            set_seller.attr('href', '/sellerinfo?uid='+seller['sid']);
            set_seller.find('.weui_cell_hd img').attr('src', seller['headimgurl']||'/static/images/getheadimg.png');
            set_seller.find('.weui_cell_bd p').text(seller['nickname']);
            for(i in input_array){
                $('#'+input_array[i][0]).val(input_array[i][2]?orderdict[pid][input_array[i][1]]/100:orderdict[pid][input_array[i][1]]);
            }
            settingpage.show();
        }
        $('#backtohome').click(function(){
            window.history.back();
        })
        $('#submitbtn').click(function(){
            var pid = $('#set_id').text();
            var data = {};
            for(i in input_array){
                data[input_array[i][1]] = $('#'+input_array[i][0]).val(); 
            }
            $.post('?action=changesetting&pid='+pid, data, function(ret){
                console.info(ret);
                if(ret=='saveDone'){
                    mymessage();
                    location.href="."
                }else if(ret=='inValidData'){
                    mymessage(true, "数据有误");
                }else{
                    mymessage(true, "系统错误");
                }
            })
        })
        mymessage = function(info, content){
            var toastid = info?"#toast2":"#toast1"
            var toast = $(toastid)
            if(content){
                toast.find('.weui_toast_content').html(content)
            }
            toast.show();
            setTimeout("$('"+toastid+"').hide()", 1500);
        }
        $('.nav_right').click(function(){
            $('#actionSheet_wrap').show()
            var mask = $('#mask');
            var weuiActionsheet = $('#weui_actionsheet');
            weuiActionsheet.addClass('weui_actionsheet_toggle');
            mask.show().addClass('weui_fade_toggle').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            $('#actionsheet_cancel').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

            function hideActionSheet(weuiActionsheet, mask) {
                weuiActionsheet.removeClass('weui_actionsheet_toggle');
                mask.removeClass('weui_fade_toggle');
                weuiActionsheet.on('transitionend', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                }).on('webkitTransitionEnd', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                })
            }
        })         
    </script>
<html>